<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        html, body {
            background: rgba(0,0,0,0);
            background-color: rgba(0,0,0,0);
        }
        body {
            background-color: rgba(0,0,0,0.5);
        }
        .vueApp {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius:10px 10px 0px 0px;
            background-color: #fff;
            z-index: 9;
        }
        .list-box {
            display: flex;
            flex-wrap: wrap;
            padding: 15px 10px;
        }
        .item {
            width: 25%;
            padding: 5px;
        }
        .item p {
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: rgba(241,241,241,1);
            border-radius: 19px;
            font-size: 15px;
        }
        .index {
            text-align: center;
            color: #000;
            font-size: 15px;
            padding: 4px 0 20px;
        }
        .item.active p {
            background-color: #5AC2FF;
            color: #fff;
        }
        .item.red p {
            background-color: #E25353;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="vueApp" v-cloak>
        <div v-if="from != 2" class="list-box">
            <div v-for="item,index in listData" :class="index == activeIndex ? 'item active' : 'item'" @click="handleItem(index)">
                <p>{{index+1}}</p>
            </div>
        </div>
        <div v-else class="list-box">
            <div v-for="item,index in listData" :class="index|classNames" @click="handleItem(index)">
                <p>{{index+1}}</p>
            </div>
        </div>
        <p class="index">{{activeIndex+1}}/{{listData.length}}</p>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var pageParam = {};
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        pageParam.activeIndex = pageParam.activeIndex || 0;
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: null,
                from: pageParam.from, // 2 题库页面
                listData: pageParam.listData,
                activeIndex: pageParam.activeIndex
            },
            filters: {
                classNames: function(index) {
                    var item = pageParam.listData[index], className = 'item';
                    if(index == pageParam.activeIndex) {
                        // 当前
                        className += ' active';
                    }else if(item.doStatus == 0) {
                        className += ' red';
                    }else if(item.doStatus == '1' || item.doStatus == '1') {
                        className += '';
                    }
                    return className;
                }
            }
        });
    }

    // 点击item
    function handleItem(index) {
        api.execScript({
            name: api.winName,
            frameName: pageParam.frameName,
            script: 'fnSetActiveIndex('+ index +');'
        });
        setTimeout(function() {
            api.closeFrame();
        }, 100);
    }

    document.body.addEventListener('click', function(e) {
        // e.stopPropagation();
        api.closeFrame();
    })
</script>
</html>
